<template>
  <div>
    <h2>练习使用vant</h2>
    <h3>1.0使用vant中的button</h3>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default" @click="btn">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <h3>2.0使用vant中的单元格</h3>
    <van-cell-group>
      <van-cell title="单元格" value="内容" />
      <van-cell title="单元格" value="内容" label="描述信息" />
    </van-cell-group>
    <h3>3.0使用vant中的图标</h3>
    <van-icon name="gem-o" />
    <van-icon name="fire-o" />
    <van-icon name="service" />
    <h3>4.0使用vant中的插槽</h3>
    <van-cell value="内容">
      <template #title>
        <van-icon name="shop" />
        <span class="custom-title">单元格</span>
        <van-icon name="vip-card" />
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  methods: {
    btn () {
      alert('你是谁???')
    }
  }
}
</script>

<style></style>
